<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Bilibili短链生成器</title>
  <meta name="keywords" content="哔哩哔哩, bilibili, 短链生成">
  <meta name="description" content="生成b23.tv格式的短链">
  <link href="https://cdn.bootcss.com" rel="dns-prefetch">
  <link href="https://cdn.jsdelivr.net" rel="dns-prefetch">
  <script async src="https://hm.baidu.com/hm.js?308d8313ec16f721670ef77465d6aff6"></script>
  <meta name="baidu-site-verification" content="Qqye5KEMN9">
  <link rel="icon" href="./favicon.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/papercss@1.8.2/dist/paper.min.css">
  <link rel="stylesheet" href="./index.css?v=517">
  <link rel="stylesheet" href="./loading.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  <link async href="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.10.0/toastify.min.css" rel="stylesheet">
  <script async src="https://cdn.bootcdn.net/ajax/libs/toastify-js/1.10.0/toastify.min.js"></script>
</head>
<body>
<div id="app">
  <h4 class="title">哔哩哔哩短链生成器</h4>

  <div class="form">
    <div class="origin-url-input">
      <input id="origin_url" type="url" name="origin_url" placeholder="https://i0.hdslb.com/bfs/album/d8fd43a41bd32b22addbb966036c582d1296298f.jpg">
      <svg class="close-icon hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z" fill="currentColor"></path></svg>
    </div>

    <div class="submit-btn" id="submit">生成短链</div>
    <div class="short-url">
      <div class="short-url-title">短链接</div>
      <div class="short-url-item bg-gray">
        <a id="short-url-value" rel="noreferrer" href="" target="_blank">
          <div class="short-url-value"></div>
          <svg class="hidden outbound-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
          </svg>
        </a>
        <div class="copy hidden">
          复制
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <a href="https://github.com/xlzy520">
      By 执笔看墨花开
    </a>

    <a href="https://github.com/xlzy520/bili-short-url" class="logo logo-img-2x">
      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
    </a>
  </div>
  <div class="loading hidden">
    <div class="mask"></div>
    <div class="pacman"><div></div><div></div><div></div><div></div><div></div></div>
  </div>

</div>

<script>


  function handleSubmit() {
    document.querySelector('#submit').addEventListener('click', () => {
      toggleLoading(true)
      const origin_url = document.querySelector('#origin_url')
      let value = origin_url.value
      const defaultValue = 'https://i0.hdslb.com/bfs/album/d8fd43a41bd32b22addbb966036c582d1296298f.jpg'
      if (!value) {
        value = defaultValue
      }
      const base_url = 'https://service-kefssw6i-1253419200.gz.apigw.tencentcs.com/short_url?url='
      const url = base_url + encodeURIComponent(value)
      fetch(url).then(res => res.json()).then(res => {
        console.log(res);
        if (res.success) {
          const shortUrlLink = document.querySelector('#short-url-value')
          const shortUrlValue = document.querySelector('.short-url-value')
          const copy = document.querySelector('.copy')
          shortUrlValue.textContent = res.short_url
          shortUrlLink.href = res.short_url
          document.querySelector('.outbound-icon').classList.remove('hidden')
          document.querySelector('.copy').classList.remove('hidden')
          document.querySelector('.bg-gray').classList.remove('bg-gray')
          copy.click()
        } else {
          Toastify({
            text: res.msg,
            position: "center",
            backgroundColor: "linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)",
            duration: 2000
          }).showToast();
        }

      }).finally(() => {
        toggleLoading(false)
      })
    })
  }

  // 为了让老婆好理解，暂时不做高度封装

  function handleInitCopy() {
    const clipboard = new ClipboardJS('.copy', {
      text: function () {
        return document.querySelector('.short-url-value').textContent;
      }
    });

    clipboard.on('success', function (e) {
      Toastify({
        text: "链接复制成功",
        position: "center",
        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        duration: 2000
      }).showToast();
    });
  }

  // 控制输入框的关闭图标显示与隐藏的方法
  function toggleCloseIcon(value) {
    const closeIcon = document.querySelector('.close-icon')
    const classList = closeIcon.classList
    if (value) {
      classList.contains('hidden') && classList.remove('hidden')
    } else {
      classList.add('hidden')
    }
  }

  // 控制loading状态显示与隐藏的方法
  function toggleLoading(show) {
    const closeIcon = document.querySelector('.loading')
    const classList = closeIcon.classList
    if (show) {
      classList.contains('hidden') && classList.remove('hidden')
    } else {
      classList.add('hidden')
    }
  }

  function init() {
    handleSubmit()
    handleInitCopy()
    document.querySelector('#origin_url').addEventListener('change', (evt) => {
      const value = evt.target.value
      toggleCloseIcon(value)
    })
    document.querySelector('.close-icon').addEventListener('click', () => {
      const origin_url = document.querySelector('#origin_url')
      origin_url.value = ''
      toggleCloseIcon()
    })
  }

  init()
</script>
</body>
</html>
